<template>
    <div  class="app-container">
        <el-form ref="form" :model="user" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="user.name"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="user.password"></el-input>
          </el-form-item>
          <el-form-item label="真实名字">
            <el-input v-model="user.trueName"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="user.email"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="user.phone"></el-input>
          </el-form-item>
          <el-form-item label="用户头像">
            <!-- 头像缩略图 -->
            <pan-thumb :image="image" />
            <!-- 文件上传按钮 -->
            <el-button type="primary" icon="el-icon-upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
              上传头像
            </el-button>
             <!--
              v-show：通过imagecropperShow控制是否弹出上传组件
              :key：类似id，唯一标示
              :url：后台上传的url地址
              @close：关闭上传组件
              @crop-upload-success：上传成功后的回调
              <input type="file" name="file"/> -->
            <image-cropper
              v-show="imagecropperShow"
              :key="imagecropperKey"
              :width="300"
              :height="300"
              url="/oss/upload/uploadImage"
              lang-type="en"
              field="file"
              @close="close"
              @crop-upload-success="cropSuccess"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">添加</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>

<script>
import userApi from '@/api/rbac/user'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
    name: '',
    components: { ImageCropper, PanThumb },
    data() {
        return {
            user: {
              name: '',
              password: '',
              trueName: '',
              email: '',
              phone: '',
              avatar: ''
            },
            imagecropperShow: false,
            imagecropperKey: 0,
            image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
        }
    },
    methods: {
        cropSuccess(resData) {
          this.imagecropperShow = false
          this.imagecropperKey = this.imagecropperKey + 1
          this.user.avatar = resData
          this.image = resData
        },
        close() {
          this.imagecropperShow = false
        },
        onSubmit() {
            userApi.add(this.user)
              .then(response => {
                  if(response.ok) {
                      //提示信息
                      this.$message({
                          type: 'success', // success,error,info,warning
                          message: response.msg
                      });
                      //回到列表页面，路由跳转
                      this.$router.push({path:'/user/list'})
                  } else {
                    this.$message({
                        type: 'error',
                        message: response.msg
                    });
                  }
              })
        }
    }
}
</script>
<style scoped>
     
</style>